import FormItem from "antd/es/form/FormItem";
import {ColorPicker, Input, InputNumber, Select} from "antd";
import type {ReactNode} from "react";

interface ComponentMap {
    [key: string]: ReactNode;
    select:ReactNode;
    input: ReactNode;
    inputNumber: ReactNode;
    slider:ReactNode;
    color: ReactNode;
    backgroundColor: ReactNode;
}

export const renderStylesInput = (setter:any,currentComponent:any) => {
    const {type, options, name} = setter;
    const componentMap:ComponentMap = {
        select: <Select options={options} />,
        input: <Input />,
        inputNumber: <InputNumber />,
        slider: <Input />, // 如果 Slider 组件有特殊需求，这里应替换为正确的组件
        color: <ColorPicker format={'rgb'} />,
        backgroundColor: <ColorPicker format={'rgb'} />
    };

    if (componentMap[type] ) {
        if (type === 'color' || type === 'backgroundColor') {
            return (
                <div className={'flex items-center p-1'} style={{ border: '1px solid #ccc' }}>
                    <FormItem name={name} noStyle>
                        {componentMap[type]}
                    </FormItem>
                    <span className={'ml-2'}>{currentComponent?.styles?.[type]}</span>
                </div>
            );
        } else {
            return <FormItem name={name} noStyle>{componentMap[type]}</FormItem>;
        }
    }

    return null;
}